<template>
  <div class="page page_home w100 h100 radius8">
    <div class="todo_create" v-if="authority">
      <el-input
        v-model.trim="form.todo"
        style="max-width: 600px"
        placeholder="Please input"
        class="input-with-select"
      >
        <template #prepend>
          <el-select
            v-model="form.state"
            placeholder="Select"
            style="width: 115px"
          >
            <el-option label="未完成" value="1" />
            <el-option label="已完成" value="2" />
          </el-select>
        </template>
        <template #append>
          <el-button
            type="primary"
            plain
            class="btn_append"
            @click="handleCreate"
            >新增</el-button
          >
        </template>
      </el-input>
    </div>

    <div class="todo_state" :key="toggle">
      <div
        class="completed"
        :class="{ toggleLeft: toggle % 2 === 0, toggleRight: toggle % 2 !== 0 }"
      >
        <el-collapse v-model="completed_activeNames">
          <el-collapse-item title="已完成" name="1">
            <template v-if="completeds.length > 0">
              <div
                class="item_comtanier"
                v-for="o in completeds"
                :key="o.id"
                @mouseover="changeBtnGroupState(true, o.id)"
                @mouseleave="changeBtnGroupState(fasle, o.id)"
                @click="handleEdit(o)"
              >
                <div class="top">
                  <div class="createTime">
                    {{
                      $moment(o.updateTime || o.createTime).format(
                        "yyyy-MM-DD HH:mm:ss"
                      )
                    }}
                  </div>
                  <div
                    class="btn_group"
                    :style="{
                      display:
                        showBtnGroup && activeTodoId === o.id ? 'block' : 'none'
                    }"
                  >
                    <el-button
                      type="danger"
                      text="danger"
                      @click.stop="handleDelete(o.id)"
                      >删除</el-button
                    >
                    <el-button
                      type="primary"
                      text="primary"
                      @click.stop="handleChangeState(o.id, o.state)"
                      >未完成</el-button
                    >
                  </div>
                </div>
                <div class="todo">{{ o.todo }}</div>
              </div>
            </template>
            <Empty v-else description="暂无已完成的待办" />
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="divider">
        <el-tooltip
          class="box-item"
          effect="dark"
          content="左右切换"
          placement="top-start"
        >
          <el-icon style="cursor: pointer" @click="toggle++"
            ><DCaret
          /></el-icon>
        </el-tooltip>
      </div>
      <div
        class="uncompleted"
        :class="{ toggleLeft: toggle % 2 !== 0, toggleRight: toggle % 2 === 0 }"
      >
        <el-collapse v-model="uncompleted_activeNames">
          <el-collapse-item title="未完成" name="1">
            <template v-if="uncompleteds.length > 0">
              <div
                class="item_comtanier"
                v-for="o in uncompleteds"
                :key="o.id"
                @mouseover="changeBtnGroupState(true, o.id)"
                @mouseleave="changeBtnGroupState(fasle, o.id)"
                @click="handleEdit(o)"
              >
                <div class="top">
                  <div class="createTime">
                    {{
                      $moment(o.updateTime || o.createTime).format(
                        "yyyy-MM-DD HH:mm:ss"
                      )
                    }}
                  </div>
                  <div
                    class="btn_group"
                    :style="{
                      display:
                        showBtnGroup && activeTodoId === o.id ? 'block' : 'none'
                    }"
                  >
                    <el-button
                      type="danger"
                      text="danger"
                      @click.stop="handleDelete(o.id)"
                      >删除</el-button
                    >
                    <el-button
                      type="primary"
                      text="primary"
                      @click.stop="handleChangeState(o.id, o.state)"
                      >已完成</el-button
                    >
                  </div>
                </div>
                <div class="todo">{{ o.todo }}</div>
              </div>
            </template>
            <Empty v-else description="暂无未完成的待办" />
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>

    <el-dialog
      title="编辑"
      v-model="dialogVisible"
      :close-on-click-modal="false"
      width="600"
      top="30vh"
      :before-close="handleClose"
    >
      <el-form
        v-if="dialogVisible"
        :model="editForm"
        :rules="rules"
        label-width="100px"
        ref="formRef"
      >
        <el-form-item label="是否完成：">
          <el-select v-model="editForm.state">
            <el-option label="未完成" value="1" />
            <el-option label="已完成" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="待办事项：" prop="todo">
          <el-input
            v-model="editForm.todo"
            :rows="6"
            :resize="false"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleEditComfirm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  postTodoCreate,
  getTodoList,
  postTodoDelete,
  postTodoUpdateState
} from "@/api/blog/todo"

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Home",
  props: {},
  components: {},
  emit: [],
  data() {
    return {
      completed_activeNames: ["1"],
      uncompleted_activeNames: ["1"],
      form: {
        todo: "",
        state: "1"
      },
      editForm: {
        todo: "",
        state: "1"
      },
      completeds: [],
      uncompleteds: [],
      showBtnGroup: false,
      activeTodoId: "",
      dialogVisible: false,
      rules: {
        todo: [{ required: true, message: "待办事项不能为空", trigger: "blur" }]
      },
      toggle: parseInt(localStorage.getItem("toggle")) || 0
    }
  },
  computed: {
    userRole(){
      return this.$store.getters['user/userRole']
    },
    authority(){
      return this.userRole === 'admin'
    }
  },
  watch: {
    toggle(n) {
      localStorage.setItem("toggle", n)
    }
  },
  methods: {
    changeBtnGroupState(state, todoId) {
      if(!this.authority) return
      this.showBtnGroup = state
      this.activeTodoId = todoId
    },

    async handleCreate() {
      if (!this.form.todo) {
        this.$message.warning("Please input something！")
        return
      }
      const { code, msg } = await postTodoCreate(this.form)
      this.$message({
        type: `${code === 200 ? "success" : "error"}`,
        message: msg
      })
      if (code === 200) {
        this.form.todo = ""
        this.form.state = "1"
        this.getGetTodolist()
      }
    },

    async getGetTodolist() {
      const res = await getTodoList()
      if (res.code === 200) {
        const { completeds, uncompleteds } = res.data
        this.completeds = completeds
        this.uncompleteds = uncompleteds
      } else {
        this.$message.error(res.msg)
      }
    },

    async handleDelete(id) {
      const { code, msg } = await postTodoDelete({ id })
      this.$message({
        type: `${code === 200 ? "success" : "error"}`,
        message: msg
      })
      if (code === 200) {
        this.getGetTodolist()
      }
    },

    async handleChangeState(id, state) {
      const { code, msg } = await postTodoUpdateState({ id, state })
      this.$message({
        type: `${code === 200 ? "success" : "error"}`,
        message: msg
      })
      if (code === 200) {
        this.getGetTodolist()
      }
    },

    handleEdit(row) {
      if(!this.authority) return
      console.log(row)
      const { id, todo, state } = row
      Object.assign(this.editForm, { id, todo, state })
      this.dialogVisible = true
    },

    handleClose() {
      this.dialogVisible = false
      this.$refs.formRef.resetFields()
    },

    handleEditComfirm() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          const { code, msg } = await postTodoUpdateState(this.editForm)
          this.$message({
            type: `${code === 200 ? "success" : "error"}`,
            message: msg
          })
          if (code === 200) {
            this.handleClose()
            this.getGetTodolist()
          }
        }
      })
    }
  },
  created() {
    this.getGetTodolist()
  }
}
</script>

<style lang="scss" scoped>
.page_home {
  display: flex;
  flex-direction: column;
  .todo_create {
    flex-shrink: 0;
    height: 100px;
    padding-top: 16px;
    text-align: center;
    ::v-deep .el-select__wrapper {
      background: $primary_light;
    }
    .btn_append {
      background: $primary_light;
      color: $primary;
      border: 1px solid $primary;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      &:hover {
        background: $primary;
        color: $white;
        border: 1px solid $primary;
      }
    }
  }
  .todo_state {
    position: relative;
    flex: 1;
    .divider {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 100%;
      background: $border;
      .el-icon {
        position: absolute;
        top: 40%;
        left: -6px;
        transform: rotate(90deg);
      }
    }
    .completed {
      position: absolute;
      top: 0;
      width: 40%;
      height: 100%;
      /* border: 1px solid $success; */
      ::v-deep .el-collapse-item__header {
        color: $success;
      }
      &.toggleLeft {
        left: 5%;
        animation: toggle 0.5s ease forwards;
      }
      &.toggleRight {
        right: 5%;
        animation: toggle 0.5s ease forwards;
      }
    }
    .uncompleted {
      position: absolute;
      top: 0;
      right: 5%;
      width: 40%;
      height: 100%;
      /* border: 1px solid $warning; */
      ::v-deep .el-collapse-item__header {
        color: $danger;
      }
      &.toggleLeft {
        left: 5%;
        animation: toggle 0.5s ease forwards;
      }
      &.toggleRight {
        right: 5%;
        animation: toggle 0.5s ease forwards;
      }
    }
    .el-collapse {
      height: 100%;
      overflow-y: auto;
      ::v-deep .el-collapse-item__header {
        font-size: 18px;
        font-weight: 600;
        border-bottom: 1px solid $border;
      }
      ::v-deep .el-collapse-item__wrap {
        border-bottom: 0;
      }
      ::v-deep .el-collapse-item__content {
        padding: 16px;
      }
      .item_comtanier {
        margin-bottom: 24px;
        padding: 12px;
        border-radius: 6px;
        box-shadow: 0 0 10px 5px $shadow;
        &:hover {
          transform: scale(1.02);
        }
        &:last-child {
          margin-bottom: 0;
        }
        .top {
          display: flex;
          height: 24px;
          justify-content: space-between;
          align-items: center;
          .btn_group {
            .el-button {
              padding: 0;
            }
          }
        }
        .todo {
          text-indent: 2em;
          font-size: 14px;
        }
      }
    }
  }
}
@keyframes toggle {
  0%{
    transform: scale(0);
  }
  100%{
    transform: scale(1);
  }
}
</style>import { transform } from "lodash"

